﻿<!DOCTYPE html>
<html lang="zh-CN" class="weather-theme-sunny">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>墨迹天气</title>
    <link rel="stylesheet" href="css/weather.css">
</head>
<body>
    <!-- 城市栏模块 -->
    <header class="city-header">
        <div class="city-container">
            <button class="location-btn" aria-label="刷新定位">
                <svg class="icon" viewBox="0 0 24 24">
                    <path fill="currentColor" d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z" />
                </svg>
            </button>
            <h1 class="city-name">北京市</h1>
        </div>
    </header>

    <!-- 实时天气卡片 -->
    <main class="weather-card">
        <div class="main-info">
            <svg class="weather-icon" aria-hidden="true">
                <use href="images/weather-icons.svg#sunny" />
            </svg>
            <div class="temp-group">
                <span class="current-temp" aria-label="当前温度">28</span>
                <span class="temp-unit">℃</span>
                <div class="feels-like">体感温度 32℃</div>
            </div>
        </div>

        <div class="air-quality">
            <div class="aqi-progress" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100">
                <span class="aqi-value">45</span>
            </div>
            <div class="wind-humidity">
                <span class="wind">东南风3级</span>
                <span class="divider">|</span>
                <span class="humidity">湿度65%</span>
            </div>
        </div>
    </main>
    <!-- 在实时天气卡片下方添加 -->
    <section class="hourly-section">
        <div class="scroll-container">
            <div class="hourly-list">
                <!-- 动态生成的小时预报项 -->
                <div class="hourly-item">
                    <div class="time">14:00</div>
                    <svg class="temp-chart" viewBox="0 0 40 24">
                        <path fill="none" stroke="currentColor" stroke-width="2"
                              d="M2 22 L10 18 L18 6 L26 14 L34 2" />
                    </svg>
                    <div class="rain-progress">
                        <div class="rain-bar" style="width: 15%"></div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <script src="./js/weather.js"></script>
</body>
</html>